<template>
 <div class="lr-content">
   <div class="side-panel">
     <div class="side-title">
       <slot name="title">
         {{ props.title }}
       </slot>
       <slot name="title-search">
       </slot>

     </div>
     <div class="side-search">
       <slot name="search"></slot>
     </div>
     <div class="side-content">
       <slot name="side-content"></slot>
     </div>
   </div>

   <div class="main-panel">
      <slot></slot>
   </div>
 </div>
</template>

<script lang="ts" setup>
const props = withDefaults(defineProps<{
  title?: string,

}>(), {
  title: ''
})
</script>

<style>
.all-content {

}
</style>

<style scoped lang="scss">
.lr-content{
  position: relative;

  .side-panel {
    width: 250px;
    border-right: solid 1px #E8E8E8;
    padding-right: 10px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;

    .side-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
    }

    .side-content {
      overflow: auto;
    }
  }

  .main-panel {
    padding-left: 270px;
  }
}
</style>
